/*
    Logic：
        主要采用原生 JavaScript，
        只有在发送 Ajax 请求是才使用 JQuery

    ===
    1、登录注册页面的切换逻辑

    2、Ajax发送及接受响应逻辑
    ===
*/


// 封装选择器, 采用ES6箭头函数写法
const getSelector = ele => {
    return typeof ele === "string" ? document.querySelector(ele) : "";
}


// 登录注册载入

const containerShow = () => {
    var show = getSelector(".container")
    show.className += " container-show"
}


window.onload = containerShow;


// 登录注册页切换
((window, document) => {

    // 登录 -> 注册
    let toSignBtn = getSelector(".toSign"),
        toLoginBtn = getSelector(".toLogin")
    loginBox = getSelector(".login-box"),
        signBox = getSelector(".sign-box");

    toSignBtn.onclick = () => {
        loginBox.className += ' animate_login';
        signBox.className += ' animate_sign';
    }

    toLoginBtn.onclick = () => {
        loginBox.classList.remove("animate_login");
        signBox.classList.remove("animate_sign");
    }


})(window, document);

// Ajax 请求发送
const signBtn = document.querySelector(".sign-btn");
signBtn.addEventListener("click", () => {
    // 获取注册的账号密码
    const signUsername = document.querySelector("#sign-user").value;
    const signPassword = document.querySelector("#sign-password").value;

    // 发送axios请求
    axios.post('/api/register/', {
        username: signUsername,
        password: signPassword
    })
        .then(response => {
            console.log(response.data); // 处理后端返回的数据
        })
        .catch(error => {
            console.error(error); // 处理请求错误
        });
});

//点击登录时，发送登录请求
const loginBtn = document.querySelector(".login-btn");

loginBtn.addEventListener("click", () => {
    // 获取输入框的账号和密码
    const username = document.querySelector("#login-user").value;
    const password = document.querySelector("#login-password").value;

    // 发送axios请求
    axios.post('/api/login/', {
        username: username,
        password: password
    })
        .then(response => {
            console.log(response.data); // 处理后端返回的数据
            // 如果登录成功，跳转到功能界面
            if (response.data.status_code === 1) {
                alert("登录成功");
                window.location.href = '/home/';

            }
            // 如果登陆失败，跳出提示框。
        })
        .catch(error => {
            console.error(error); // 处理请求错误
        });
});
